<template>
    <div class="login">
        <van-nav-bar
            title="登录"
        />

        <!-- 表单 -->
        <van-cell-group>
            <van-field
                v-model="user.mobile"
                required
                clearable
                label="手机号"
                placeholder="请输入手机号"
                />

            <van-field
                v-model="user.code"
                type="password"
                label="验证码"
                placeholder="请输入验证码"
                required />

        </van-cell-group>
        <!-- /表单 -->

        <!-- 登录按钮 -->
        <div class="login-btn-box">
            <van-button type="info" @click="onLogin">登录</van-button>
        </div>
        <!-- /登录按钮 -->
        </div>
</template>
<script>
import { login } from '@/api/user'
export default {
  name: 'LoginPage',
  data () {
    return {
      user: {
        mobile: '',
        code: ''
      }
    }
  },
  methods: {
    async onLogin () {
      this.$toast.loading({
        duration: 0, // 持续时间，0表示持续展示不停止
        forbidClick: true, // 是否禁止背景点击
        message: '登录中...' // 提示消息
      })
      try {
        const res = await login(this.user)
        console.log('登录成功', res)
        this.$store.commit('setUser', res.data.data)
        console.log(this.$store.state.user)
        this.$toast.success('登录成功')
        this.$router.push('/')
      } catch (err) {
        console.log('登录失败', err)
        this.$toast.fail('登录失败，手机号或验证码错误')
      }
    }
  }
}
</script>
<style lang="less" scoped>
.login-btn-box{
    padding-top: 20px;
}
.van-button{
    width: 100%;
}
</style>
